{{#extend "layout" title="Sing App Dashboard - Tables Basic"}}
    {{#content "sidebar"}}
        {{> sidebar active="tables_basic"}}
    {{/content}}
    {{#content "content" mode="replace"}}
        <ol class="breadcrumb">
            <li class="breadcrumb-item">YOU ARE HERE</li>
            <li class="breadcrumb-item active">Tables Basic</li>
        </ol>
        <h2 class="page-title">Tables - <span class="fw-semi-bold">Static</span></h2>
        <div class="row">
            <div class="col-lg-12">
                <section class="widget">
                    <header>
                        <h5>
                            Table <span class="fw-semi-bold">Styles</span>
                        </h5>
                        <div class="widget-controls">
                            <a href="#"><i class="la la-cog"></i></a>
                            <a data-widgster="close" href="#"><i class="la la-remove"></i></a>
                        </div>
                    </header>
                    <div class="widget-body">
                        <table class="table">
                            <thead>
                            <tr>
                                <th class="d-none d-md-table-cell">#</th>
                                <th>Picture</th>
                                <th>Description</th>
                                <th class="d-none d-md-table-cell">Info</th>
                                <th class="d-none d-md-table-cell">Date</th>
                                <th class="d-none d-md-table-cell">Size</th>
                                <th></th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td class="d-none d-md-table-cell">1</td>
                                <td>
                                    <img class="img-rounded" src="demo/img/pictures/1.jpg" alt="" height="50">
                                </td>
                                <td>
                                    Palo Alto
                                </td>
                                <td class="d-none d-md-table-cell">
                                    <p class="no-margin">
                                        <small>
                                            <span class="fw-semi-bold">Type:</span>
                                            <span class="text-semi-muted">&nbsp; JPEG</span>
                                        </small>
                                    </p>
                                    <p>
                                        <small>
                                            <span class="fw-semi-bold">Dimensions:</span>
                                            <span class="text-semi-muted">&nbsp; 200x150</span>
                                        </small>
                                    </p>
                                </td>
                                <td class="d-none d-md-table-cell text-semi-muted">
                                    September 14, 2012
                                </td>
                                <td class="d-none d-md-table-cell text-semi-muted">
                                    45.6 KB
                                </td>
                                <td class="width-150">
                                    <div class="bg-gray-lighter progress progress-sm">
                                        <div class="progress-bar progress-sm bg-success js-progress-animate"
                                             style="width: 0;" data-width="29%"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="d-none d-md-table-cell">2</td>
                                <td>
                                    <img class="img-rounded" src="demo/img/pictures/2.jpg" alt="" height="50">
                                </td>
                                <td>
                                    The Sky
                                </td>
                                <td class="d-none d-md-table-cell">
                                    <p class="no-margin">
                                        <small>
                                            <span class="fw-semi-bold">Type:</span>
                                            <span class="text-semi-muted">&nbsp; PSD</span>
                                        </small>
                                    </p>
                                    <p>
                                        <small>
                                            <span class="fw-semi-bold">Dimensions:</span>
                                            <span class="text-semi-muted">&nbsp; 2400x1455</span>
                                        </small>
                                    </p>
                                </td>
                                <td class="d-none d-md-table-cell text-semi-muted">
                                    November 14, 2012
                                </td>
                                <td class="d-none d-md-table-cell text-semi-muted">
                                    15.3 MB
                                </td>
                                <td class="width-150">
                                    <div class="bg-gray-lighter progress progress-sm">
                                        <div class="progress-bar progress-sm bg-warning js-progress-animate"
                                             style="width: 0;" data-width="33%"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="d-none d-md-table-cell">3</td>
                                <td>
                                    <img class="img-rounded" src="demo/img/pictures/3.jpg" alt="" height="50">
                                </td>
                                <td>
                                    Down the road
                                    <br>
                                    <span class="badge bg-danger">INFO!</span>
                                </td>
                                <td class="d-none d-md-table-cell">
                                    <p class="no-margin">
                                        <small>
                                            <span class="fw-semi-bold">Type:</span>
                                            <span class="text-semi-muted">&nbsp; JPEG</span>
                                        </small>
                                    </p>
                                    <p>
                                        <small>
                                            <span class="fw-semi-bold">Dimensions:</span>
                                            <span class="text-semi-muted">&nbsp; 200x150</span>
                                        </small>
                                    </p>
                                </td>
                                <td class="d-none d-md-table-cell text-semi-muted">
                                    September 14, 2012
                                </td>
                                <td class="d-none d-md-table-cell text-semi-muted">
                                    49.0 KB
                                </td>
                                <td class="width-150">
                                    <div class="bg-gray-lighter progress progress-sm">
                                        <div class="progress-bar progress-sm bg-info js-progress-animate"
                                             style="width: 0;" data-width="38%"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="d-none d-md-table-cell">4</td>
                                <td>
                                    <img class="img-rounded" src="demo/img/pictures/4.jpg" alt="" height="50">
                                </td>
                                <td>
                                    The Edge
                                </td>
                                <td class="d-none d-md-table-cell">
                                    <p class="no-margin">
                                        <small>
                                            <span class="fw-semi-bold">Type:</span>
                                            <span class="text-semi-muted">&nbsp; PNG</span>
                                        </small>
                                    </p>
                                    <p>
                                        <small>
                                            <span class="fw-semi-bold">Dimensions:</span>
                                            <span class="text-semi-muted">&nbsp; 210x160</span>
                                        </small>
                                    </p>
                                </td>
                                <td class="d-none d-md-table-cell text-semi-muted">
                                    September 15, 2012
                                </td>
                                <td class="d-none d-md-table-cell text-semi-muted">
                                    69.1 KB
                                </td>
                                <td class="width-150">
                                    <div class="bg-gray-lighter progress progress-sm">
                                        <div class="progress-bar progress-sm bg-danger js-progress-animate"
                                             style="width: 0;" data-width="17%"></div>
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td class="d-none d-md-table-cell">5</td>
                                <td>
                                    <img class="img-rounded" src="demo/img/pictures/11.jpg" alt="" height="50">
                                </td>
                                <td>
                                    Fortress
                                </td>
                                <td class="d-none d-md-table-cell">
                                    <p class="no-margin">
                                        <small>
                                            <span class="fw-semi-bold">Type:</span>
                                            <span class="text-semi-muted">&nbsp; JPEG</span>
                                        </small>
                                    </p>
                                    <p>
                                        <small>
                                            <span class="fw-semi-bold">Dimensions:</span>
                                            <span class="text-semi-muted">&nbsp; 1452x1320</span>
                                        </small>
                                    </p>
                                </td>
                                <td class="d-none d-md-table-cell text-semi-muted">
                                    October 1, 2012
                                </td>
                                <td class="d-none d-md-table-cell text-semi-muted">
                                    2.3 MB
                                </td>
                                <td class="width-150">
                                    <div class="bg-gray-lighter progress progress-sm">
                                        <div class="progress-bar progress-sm bg-primary js-progress-animate"
                                             style="width: 0;" data-width="41%"></div>
                                    </div>
                                </td>
                            </tr>
                            </tbody>

                        </table>
                        <div class="clearfix">
                            <div class="float-right">
                                <button class="btn btn-default btn-sm mr-3">
                                    Send to ...
                                </button>
                                <div class="btn-group">
                                    <button class="btn btn-sm btn-inverse dropdown-toggle" data-toggle="dropdown">
                                        &nbsp; Clear &nbsp;
                                    </button>
                                    <ul class="dropdown-menu dropdown-menu-right">
                                        <li><a class="dropdown-item" href="#">Clear</a></li>
                                        <li><a class="dropdown-item" href="#">Move ...</a></li>
                                        <li><a class="dropdown-item" href="#">Something else here</a></li>
                                        <li class="dropdown-divider"></li>
                                        <li><a class="dropdown-item" href="#">Separated link</a></li>
                                    </ul>
                                </div>
                            </div>
                            <p>Basic table with styled content</p>
                        </div>
                    </div>
                </section>
            </div>
        </div>
        <div class="row">
            <div class="col-lg-6">
                <section class="widget">
                    <header>
                        <h5>Table <span class="fw-semi-bold">Styles</span></h5>
                        <div class="widget-controls">
                            <a href="#"><i class="la la-cog"></i></a>
                            <a data-widgster="close" href="#"><i class="la la-remove"></i></a>
                        </div>
                    </header>
                    <div class="widget-body">
                        <h3>Stripped <span class="fw-semi-bold">Table</span></h3>
                        <p>Each row is highlighted. You will never lost there. Just <code>.table-striped</code> it.</p>
                        <table class="table table-striped">
                            <thead>
                            <tr>
                                <th>
                                    <div class="checkbox abc-checkbox">
                                        <input id="checkbox1" type="checkbox" data-check-all>
                                        <label for="checkbox1"></label>
                                    </div>
                                </th>
                                <th>First Name</th>
                                <th>Last Name</th>
                                <th>Info</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <div class="checkbox abc-checkbox">
                                        <input id="checkbox2" type="checkbox">
                                        <label for="checkbox2"></label>
                                    </div>
                                </td>
                                <td>Mark</td>
                                <td>Otto</td>
                                <td><span class="badge bg-success">Online</span></td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="checkbox abc-checkbox">
                                        <input id="checkbox3" type="checkbox">
                                        <label for="checkbox3"></label>
                                    </div>
                                </td>
                                <td>Jacob <span class="badge bg-warning text-gray-dark">ALERT!</span></td>
                                <td>Thornton</td>
                                <td><span class="badge bg-gray-light text-gray">Away</span></td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="checkbox abc-checkbox">
                                        <input id="checkbox4" type="checkbox">
                                        <label for="checkbox4"></label>
                                    </div>
                                </td>
                                <td>Larry</td>
                                <td>the Bird</td>
                                <td><span class="badge bg-danger">Construct</span></td>
                            </tr>
                            </tbody>
                        </table>
                        <br><br>
                        <h3>Hover <span class="fw-semi-bold">Table</span></h3>
                        <p>Trace only what's really important. <code>.table-hover</code> is made for it.</p>
                        <div class="table-responsive">
                            <table class="table table-hover">
                                <thead>
                                <tr>
                                    <th>#</th>
                                    <th>First Name</th>
                                    <th>Last Name</th>
                                    <th>Email</th>
                                    <th>Status</th>
                                </tr>
                                </thead>
                                <tbody>
                                <tr>
                                    <td>1</td>
                                    <td>Mark</td>
                                    <td>Otto</td>
                                    <td><a href="#">ottoto@example.com</a></td>
                                    <td><span class="badge badge-pill badge-info">Pending</span></td>
                                </tr>
                                <tr>
                                    <td>2</td>
                                    <td>Jacob</td>
                                    <td>Thornton</td>
                                    <td><a href="#">fat.thor@example.com</a></td>
                                    <td><span class="badge badge-pill badge-warning">Unconfirmed</span>
                                    </td>
                                </tr>
                                <tr>
                                    <td>3</td>
                                    <td>Larry</td>
                                    <td>the Bird</td>
                                    <td><a href="#">larry@example.com</a></td>
                                    <td><span class="badge badge-pill badge-success">New</span></td>
                                </tr>
                                <tr>
                                    <td>4</td>
                                    <td>Peter</td>
                                    <td>Horadnia</td>
                                    <td><a href="#">peter@example.com</a></td>
                                    <td><span class="badge badge-pill badge-primary">Active</span></td>
                                </tr>
                                </tbody>
                            </table>
                        </div>
                    </div>
                </section>
            </div>
            <div class="col-lg-6">
                <section class="widget">
                    <header>
                        <h5>Table <span class="fw-semi-bold">Styles</span></h5>
                        <div class="widget-controls">
                            <a href="#"><i class="la la-cog"></i></a>
                            <a data-widgster="close" href="#"><i class="la la-remove"></i></a>
                        </div>
                    </header>
                    <div class="widget-body">
                        <h3>Bordered <span class="fw-semi-bold">Table</span></h3>
                        <p>Each row is highlighted. You will never lost there. That's how
                            all of us learned in school the table should look like. Just add
                            <code>.table-bordered</code> to it.</p>
                        <table class="table table-bordered table-lg mt-lg mb-0">
                            <thead>
                            <tr>
                                <th>
                                    <div class="checkbox abc-checkbox">
                                        <input id="checkbox10" type="checkbox" data-check-all>
                                        <label for="checkbox10"></label>
                                    </div>
                                </th>
                                <th>Product</th>
                                <th >Price</th>
                                <th class="text-center">Sales</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <div class="checkbox abc-checkbox">
                                        <input id="checkbox11" type="checkbox" data-check-all>
                                        <label for="checkbox11"></label>
                                    </div>
                                </td>
                                <td>On the Road</td>
                                <td>$25 224.2</td>
                                <td class="text-center">
                                    <div class="sparkline" data-type="bar" data-bar-color="#3abf94">13,14,16,15,4,14,20
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="checkbox abc-checkbox">
                                        <input id="checkbox12" type="checkbox" data-check-all>
                                        <label for="checkbox12"></label>
                                    </div>
                                </td>
                                <td>HP Core i7</td>
                                <td>$87 346.1</td>
                                <td class="text-center">
                                    <div class="sparkline" data-type="bar" data-bar-color="#1a86d0">14,12,16,11,17,19,16</div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="checkbox abc-checkbox">
                                        <input id="checkbox13" type="checkbox" data-check-all>
                                        <label for="checkbox13"></label>
                                    </div>
                                </td>
                                <td>Let's Dance</td>
                                <td>$57 944.6</td>
                                <td class="text-center">
                                    <div class="sparkline" data-type="bar" data-bar-color="#3abf94">11,17,19,16,14,12,16
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="checkbox abc-checkbox">
                                        <input id="checkbox14" type="checkbox" data-check-all>
                                        <label for="checkbox14"></label>
                                    </div>
                                </td>
                                <td>Air Pro</td>
                                <td>$118 533.1</td>
                                <td class="text-center">
                                    <div class="sparkline" data-type="bar" data-bar-color="#005792">13,14,20,16,15,4,14
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="checkbox abc-checkbox">
                                        <input id="checkbox15" type="checkbox" data-check-all>
                                        <label for="checkbox15"></label>
                                    </div>
                                </td>
                                <td>Version Control</td>
                                <td>$72 854.5</td>
                                <td class="text-center">
                                    <div class="sparkline" data-type="bar" data-bar-color="#005792">16,15,4,14,13,14,20
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </section>
                <section class="widget">
                    <header>
                        <h5>Table <span class="fw-semi-bold">Styles</span></h5>
                        <div class="widget-controls">
                            <a href="#"><i class="la la-cog"></i></a>
                            <a data-widgster="close" href="#"><i class="la la-remove"></i></a>
                        </div>
                    </header>
                    <div class="widget-body">
                        <h3>Overflow <span class="fw-semi-bold">Table</span></h3>
                        <p>
                            Add any non-bordered .table within a widget for a seamless design.
                            Awesome look for no cost.
                            Just wrap the table with simple css class <code>.widget-table-overlay</code> inside
                            of widget
                        </p>
                    </div>
                    <div class="widget-table-overlay">
                        <table class="table table-striped table-lg mt-lg mb-0">
                            <thead class="no-bd">
                            <tr>
                                <th>
                                    <div class="checkbox abc-checkbox">
                                        <input id="checkbox210" type="checkbox" data-check-all>
                                        <label for="checkbox210"></label>
                                    </div>
                                </th>
                                <th>Product</th>
                                <th>Price</th>
                                <th class="text-center">Sales</th>
                            </tr>
                            </thead>
                            <tbody>
                            <tr>
                                <td>
                                    <div class="checkbox abc-checkbox">
                                        <input id="checkbox211" type="checkbox" data-check-all>
                                        <label for="checkbox211"></label>
                                    </div>
                                </td>
                                <td>On the Road</td>
                                <td>$25 224.2</td>
                                <td class="text-center">
                                    <div class="sparkline" data-type="bar" data-bar-color="#005792">13,14,16,15,4,14,20
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="checkbox abc-checkbox">
                                        <input id="checkbox212" type="checkbox" data-check-all>
                                        <label for="checkbox212"></label>
                                    </div>
                                </td>
                                <td>HP Core i7</td>
                                <td>$87 346.1</td>
                                <td class="text-center">
                                    <div class="sparkline" data-type="bar" data-bar-color="#005792">14,12,16,11,17,19,16</div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="checkbox abc-checkbox">
                                        <input id="checkbox213" type="checkbox" data-check-all>
                                        <label for="checkbox213"></label>
                                    </div>
                                </td>
                                <td>Let's Dance</td>
                                <td>$57 944.6</td>
                                <td class="text-center">
                                    <div class="sparkline" data-type="bar" data-bar-color="#fd5e00">11,17,19,16,14,12,16
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="checkbox abc-checkbox">
                                        <input id="checkbox214" type="checkbox" data-check-all>
                                        <label for="checkbox214"></label>
                                    </div>
                                </td>
                                <td>Air Pro</td>
                                <td>$118 533.1</td>
                                <td class="text-center">
                                    <div class="sparkline" data-type="bar" data-bar-color="#005792">13,14,20,16,15,4,14
                                    </div>
                                </td>
                            </tr>
                            <tr>
                                <td>
                                    <div class="checkbox abc-checkbox">
                                        <input id="checkbox215" type="checkbox" data-check-all>
                                        <label for="checkbox215"></label>
                                    </div>
                                </td>
                                <td>Version Control</td>
                                <td>$72 854.5</td>
                                <td class="text-center">
                                    <div class="sparkline" data-type="bar" data-bar-color="#1a86d0">16,15,4,14,13,14,20
                                    </div>
                                </td>
                            </tr>
                            </tbody>
                        </table>
                    </div>
                </section>
            </div>
        </div>
    {{/content}}
    {{#content "scripts"}}
        <script src="../node_modules/jquery-sparkline/jquery.sparkline.js"></script>
        <!-- page specific js -->
        <script src="js/tables.js"></script>
    {{/content}}
{{/extend}}
